﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    <script src="./js/htmlFont.js"></script>
    <title>首页</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="header-top">
            <img src="./images/header_logo.png" alt="">
            <img src="./images/header_app.png" alt="">
        </div>
        <div class="header-footer">
            <input type="text" class="ipt" placeholder="请输入你想比价的商品">
            <a href="javascript:;">搜索</a>
        </div>
        <div class="kong"></div>
    </header>

    <!-- 导航栏 -->
    <div class="nav">
        <div class="nav-top">
            <ul>
                <li>
                    <a href="javascript:;"><img src="./images/ic_search.png" alt="">
                        <p>比价搜索</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_cu.png" alt="">
                        <p>省钱控</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_coudanpin.png" alt="">
                        <p>国内折扣</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_bcj.png" alt="">
                        <p>白菜价</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/haitao.png" alt="">
                        <p>海涛折扣</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_temai.png" alt="">
                        <p>优惠券</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_trend.png" alt="">
                        <p>查历史价</p>
                    </a>
                </li>
                <li>
                    <a class="nav-more" href="javascript:;"><img src="./images/gengduo.png" alt="">
                        <p>更多</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="nav-footer" style="display:none">
            <ul>
                <li>
                    <a href="javascript:;"><img src="./images/ic_coudanpin.png" alt="">
                        <p>凑单品</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_kb.png" alt="">
                        <p>口碑排行</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_mall.png" alt="">
                        <p>商城导航</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/ic_pp.png" alt="">
                        <p>品牌大全</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 超值折扣推荐 -->
    <div class="discount">
        <div class="discount-top">
            <p>超值折扣推荐</p>
            <a class="fa fa-chevron-right" href="javascript:;"></a>
        </div>
        <div class="goods">
            <ul class="goodslist">

            </ul>
        </div>
    </div>

    <!-- 更多优惠信息 -->
    <div class="morecount">
        <a href="javascript:;">更多优惠信息<span class="fa fa-angle-double-right"></span></a>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="brand">
            <p>品牌排行</p>
            <a class="fa fa-chevron-right" href="javascript:;"></a>
        </div>
        <div class="footer-top">
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li class="go"><span class="fa fa-arrow-up"></span> 返回顶部</li>
            </ul>
        </div>
        <div class="footer-footer">
            <div class="shouji">
                <a href="javascript:;">手机APP下载</a>
                <a href="javascript:;"> 慢慢买手机版</a>
                <a href="javascript:;">-掌上比价平台</a>
            </div>
            <a href="javascript:;">m.mammambuy.com</a>

        </div>
    </footer>
</body>

</html>
<script src="./lib/jquery/jquery-1.12.4.js"></script>
<script src="./js/index.js"></script>

<script src="./lib/template/template.js"></script>
<script type="text/template" id="goodsListTmp">
    {{each result as val key}}
    <li>
        <div class="img-left">
            {{val.productImg2}}
        </div>
        <div class="li-right">
            <a href="javascript:;">{{val.productName}}<span>{{val.productPinkage}}</span></a>
            <div class="right-bottom">
                <p>{{val.productFrom}}|{{val.productTime}}</p>
                <p>{{val.productComCount}}</p>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    $.ajax({
        type: 'post',
        url: 'http://193.112.55.79:9090/api/getmoneyctrl',
        dataType: 'jsonp',
        success: function(res) {
            console.log(res);
            template.config("escape", false);
            var htmlStr = template('goodsListTmp', res);
            //动态渲染数据
            $('.goodslist').html(htmlStr);
        }
    })
</script>